<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
		<style>
			.red {
				background-color: red;
			}
			
			.box1 {
				height: 500px;
				width: 600px;
				border: 2px solid #333;
				padding: 20px;
			}
			.box2 {
				height: 300px;
				width: 200px;
				border: 2px solid #ff6700;
				position: relative;
			}
			
			.box3 {
				height: 100px;
				width: 100px;
				background-color: aquamarine;
				margin: 50px;
			}
		</style>
</head>
<body>


<h1 id="heading" class="red red1">Hello jQuery</h1>

<div class="box1">
	<div class="box2">
		<div class="box3"></div>
	</div>
</div>

<!-- 
<div class="box1">
	<div class="box2">
		<div class="box3"></div>
	</div>
</div>


<div class="box1">
	<div class="box2">
		<div class="box3"></div>
	</div>
</div>


<div class="box1">
	<div class="box2">
		<div class="box3"></div>
	</div>
</div> -->





<script src="js/jquery-3.5.1.js"></script>
<script src="js/index.js"></script>
</body>
</html>